<template>
  <div class="container">
    <p><strong>Checkbox</strong></p>
    <p>{{this.checkStatus}}</p>
    <m-checkbox v-model="checkStatus.checked1" @change="handleChange"/>
    <m-checkbox v-model="checkStatus.checked2" label="选择框" />
    <m-checkbox v-model="checkStatus.checked2" label="选择框" disabled />
    <m-checkbox v-model="checkStatus.checked3" :label="checkStatus.checked3" true-value="on" false-value="off" />
    <m-checkbox v-model="checkStatus.checked4" :label="checkStatus.checked4" :true-value="1" :false-value="0" />
    <div></div>
    <m-checkbox v-model="checkStatus.checked5" true-value="111">111</m-checkbox>
    <m-checkbox v-model="checkStatus.checked5" true-value="222" :indeterminate="isIndeterminate">222</m-checkbox>
    <input type="checkbox" v-model="checkStatus.checked5" value="123">
    <input type="checkbox" v-model="checkStatus.checked5" value="111">

    <p></p>
    <p><strong>Radio</strong></p>
    <p>{{radioStatus}}</p>
    <input type="radio" v-model="radioStatus.radio1" value="1">
    <input type="radio" v-model="radioStatus.radio1" value="2">
    <m-radio v-model="radioStatus.radio1" label-value="1" label="1" @change="handleRadioChange"/>
    <m-radio v-model="radioStatus.radio1" label-value="2" label="2" disabled />
    <m-radio v-model="radioStatus.radio1" label-value="3" label="3" />
    <m-radio v-model="radioStatus.radio1" label-value="4" label="4" />

    <p></p>
    <m-radio-button v-model="radioStatus.radio2" :label-value="1" label="北京" />
    <m-radio-button v-model="radioStatus.radio2" :label-value="2" label="上海" disabled />
    <m-radio-button v-model="radioStatus.radio2" :label-value="3" label="广州" />
    <m-radio-button v-model="radioStatus.radio2" :label-value="4" label="深圳" />

    <p></p>
    <div class="m-radio-group">
      <m-radio-button v-model="radioStatus.radio2" :label-value="1" label="北京" />
      <m-radio-button v-model="radioStatus.radio2" :label-value="2" label="上海" disabled />
      <m-radio-button v-model="radioStatus.radio2" :label-value="3" label="广州" />
      <m-radio-button v-model="radioStatus.radio2" :label-value="4" label="深圳" />
    </div>

    <div style="margin-top: 10px;">
       <m-radio-group v-model="radioStatus.radio3" name="platform">
        <m-radio label-value="andriod">Andriod</m-radio>
        <m-radio label-value="apple">Apple</m-radio>
        <m-radio label-value="window" disabled>Win</m-radio>
        <m-radio label-value="linux">Linux</m-radio>
        <m-radio label-value="chrome">Chrome os</m-radio>
        <m-radio label-value="other">Other</m-radio>
      </m-radio-group>
      <m-radio-group v-model="radioStatus.radio3" name="platform">
        <m-radio-button label-value="andriod">Andriod</m-radio-button>
        <m-radio-button label-value="apple">Apple</m-radio-button>
        <m-radio-button label-value="window" disabled>Win</m-radio-button>
        <m-radio-button label-value="linux">Linux</m-radio-button>
        <m-radio-button label-value="chrome">Chrome os</m-radio-button>
        <m-radio-button label-value="other">Other</m-radio-button>
      </m-radio-group>
      <!-- <m-radio-group v-model="radioStatus.radio3">
        <m-radio-button label-value="andriod">Andriod</m-radio-button>
        <m-radio-button label-value="apple">Apple</m-radio-button>
        <m-radio-button label-value="window" disabled>Win</m-radio-button>
        <m-radio-button label-value="linux">Linux</m-radio-button>
        <m-radio-button label-value="chrome">Chrome os</m-radio-button>
        <m-radio-button label-value="other">Other</m-radio-button>
      </m-radio-group> -->
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      checkStatus: {
        checked1: true,
        checked2: false,
        checked3: 'on',
        checked4: 1,
        checked5: []
      },
      isIndeterminate: false,
      radioStatus: {
        radio1: '1',
        radio2: 2,
        radio3: ''
      }
    }
  },
  methods: {
    handleChange (val) {
      console.log('checkbox', val)
    },
    handleRadioChange (val) {
      console.log('radio', val)
    }
  }
}
</script>
